<!--
 * @Author: duan
 * @Description:  double-twelve
 * @Version: 1.0.0
 * @Time: 2020/11/16
-->
<template>
  <div class="confirm">
    <!--地址 v-if="goodsInfo.productType==1&&goodsInfo.productProperty==3" -->
    <div class="address  confirm-item"
         v-if="goodsInfo.productType==1&&goodsInfo.productProperty==3"
         @click='chooseAddress'>
      <div class="left">
        <img class="address-img" :src="imgUrl+'/address.png'" alt="">
        <div class="choose-text" v-if="!addressId">请选择收货地址</div>
        <div class="address-details" v-if="addressId">
          <div class="name">{{ defaultAddress.deliveryName }} <span
            style="margin-left: 30px;">{{ defaultAddress.mobilePhone }}</span></div>
          <div class="place">{{ defaultAddress.provinceName }}{{ defaultAddress.cityName }}{{
              defaultAddress.areaName
            }}{{ defaultAddress.detailAddress }}
          </div>
        </div>
      </div>
      <van-icon name="arrow"/>
    </div>

    <!--手机号码-->
    <van-cell-group class="phone" v-if="goodsInfo.productType==1&&goodsInfo.productProperty!=3">
      <van-field
        v-model="phone"
        clearable
        label="手机号码"
        placeholder="请输入手机号码"
        :rules="[{ required: true, message: '手机号码' }]"
      />
    </van-cell-group>

    <!--员工姓名-->
    <van-cell-group class="phone" v-if="goodsInfo.productSecondClassify==7">
      <van-field
        v-model="name"
        clearable
        label="姓名"
        placeholder="请输入姓名"
        :rules="[{ required: true, message: '姓名' }]"
      />
    </van-cell-group>

    <!-- 商品详情-->
    <div class="goods-desc confirm-item">
      <van-image class="goods-img" :src="goodsInfo.productIcon" alt=""/>
      <div class="right">
        <div class="name">{{ goodsInfo.productName }}</div>
        <div class="total-price" v-if="!show">¥ {{ goodsInfo.salePrice | toFix }}</div>
        <div class="total-price" v-if="show">¥ {{ goodsInfo.marketPrice | toFix }}</div>
        <div class="number" v-if="!show">¥ {{ goodsInfo.salePrice | toFix }} <span
          style="margin:0 5px 0 20px;">数量:</span>{{ number }}
        </div>
        <div class="number" v-if="show">¥ {{ goodsInfo.marketPrice | toFix }} <span
          style="margin:0 5px 0 20px;">数量:</span>{{ number }}
        </div>
      </div>
    </div>

    <div class="price-content">
      <div class="item">
        <span class="goods-price left">应付金额：</span>
        <div class="right">
          <div class="price" v-if="!show">
            ¥ {{ (Number(goodsInfo.salePrice)).toFixed(2) }}
          </div>
          <div class="price" v-if="show">
            ¥ {{ (Number(goodsInfo.marketPrice)).toFixed(2) }}
          </div>
        </div>
      </div>
    </div>

    <div class="submit" @click="onSubmit">确认支付</div>

    <!-- 支付表单提交-->
    <div id="forms">
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import {Toast} from 'vant'
import {throttle} from '@/utils'

Vue.use(Toast)
export default {
  name: 'confirmOrder',
  data() {
    return {
      // 选择地址
      addressId: '',
      defaultAddress: {},
      discountInfo: [],
      // 商品信息
      goodsInfo: {},
      totalSalePrice: 0,

      total: 0,
      number: 1,
      phone: '',
      name: '',
      show: '',
    }
  },
  destroyed() {
    this.$eventBus.$off('changeAddress')
  },
  beforeCreate() {
    this.$eventBus.$on('changeAddress', (data) => {
      // this.$nextTick(() => {
      this.$eventBus.addressId = data
      this.addressId = this.$eventBus.addressId
      this.hasAddressId(this.addressId) // 判断是否有收货地址ID
      // })
    })
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {

  },
  mounted() {
    this.orderPreview()
    if (!this.$eventBus.addressId) {
      this.getDefaultAddress()
    }
  },

  filters: {
    toFix(price) {
      return ((Number(price)).toFixed(2))
    }
  },
  // 方法
  methods: {
    // 1丶收货地址====================================================
    // 跳转到收货地址列表
    chooseAddress() {
      this.addressId = ''
      this.$router.push({
        path: '/addressList'
      })
    },
    // 获取默认地址
    getDefaultAddress() {
      this.$HttpPost(this.$api.addressList).then(res => {
        if (res.code === '000') {
          const address = res.content.filter(item => {
            if (item.defaultFlag == 1) {
              return item
            }
          })
          if (address && address.length > 0) {
            this.addressId = address[0].deliveryAddressNo
            this.defaultAddress = {...address[0]}
          } else {
            this.addressId = ''
            this.defaultAddress = {}
          }
        }
      })
    },
    // 获取选择地址详情
    getAddressDetails(id) {
      const params = {
        deliveryAddressNo: id
      }
      this.$HttpPost(this.$api.addressDetails, params).then(res => {
        // 收货地址详情  this.defaultAddress=
        if (res.code === '000') {
          this.defaultAddress = res.content
        }
      })
    },
    // 判断页面进来是否有地址ID
    hasAddressId(id) {
      if (this.addressId) {
        this.getAddressDetails(id)
      } else {
        this.getDefaultAddress()
      }
    },

    // 2丶商品信息=========================================================
    orderPreview() {
      // 商品链接
      const params = {
        activityProductNo: this.$route.query.activityProductNo
      }
      this.$HttpPost(this.$api.goodsDetails, params).then(res => {
        if (res.code === '000') {
          this.goodsInfo = res.content
          this.totalSalePrice = ((Number(this.goodsInfo.salePrice)) * this.number).toFixed(2)
          this.show = false
          // 请求成功调取优惠券接口
          this.$HttpPost(this.$api.discountAmount, params).then(res => {
            if (res.code === '000') {
              this.discountInfo = res.content
              if (this.discountInfo.length === 0) {
                this.show = true
              } else {
                this.show = false
              }
            }
          })
        } else {
          this.$toast(res.desc, 'middle')
          this.goodsInfo = {}
        }
      })

    },

    // 3丶优惠券选择=======================================
    goCouponDetail() {
      this.$router.push({
        path: '/coupon/detail'
      })
      window._czc.push(['_trackEvent', '支付成功', '返回首页', 23])
    },

    // 4丶提交订单==========================================
    onSubmit: throttle(function () {
      if (this.goodsInfo.productType == 1 && this.goodsInfo.productProperty == 3 && !this.addressId) {
        return Toast('请选择收货地址')
      }
      if (this.goodsInfo.productType == 1 && this.goodsInfo.productProperty != 3) {
        if (!this.phone || this.phone.replace(/\s+/g, '') == '') {
          return Toast('请输入手机号码')
        }
        if (!(/^1[34578]\d{9}$/.test(this.phone))) {
          return Toast('请输入正确的手机号码')
        }
      }
      if (this.goodsInfo.productSecondClassify == 7) {
        if (!this.name || this.name.replace(/\s+/g, '') == '') {
          return Toast('请输入姓名')
        }
      }
      // 商品下单
      const params = {
        userEquityId: this.discountInfo.length > 0 ? this.discountInfo[0].id : '',
        payCode: 'BC.TRADE.ALIPAY.JB.PAY', // 类型：String  必有字段  备注：支付编码
        activityProductNo: this.goodsInfo.activityProductNo + '', // 类型：String  必有字段  备注：商品编号
        productName: this.goodsInfo.productName, // 类型：String  必有字段  备注：商品名称
        quantity: this.number, // 类型：String  必有字段  备注：商品购买数量
        deliveryAddressNo: this.goodsInfo.productType == 1 && this.goodsInfo.productProperty == 3 ? this.addressId : '', // 地址编码
        phone: this.goodsInfo.productType == 1 && this.goodsInfo.productProperty == 3 ? this.defaultAddress.mobilePhone : this.phone,
        userName: this.goodsInfo.productSecondClassify == 7 ? this.name : '',
      }
      this.$HttpPost(this.$api.pay, params).then(res => {
        if (res.code === '000') {
          document.getElementById('forms').innerHTML = res.content
          document.forms[0].submit()
          document.getElementById('forms').innerHTML = ''
        } else {
          this.$toast(res.desc, 'middle')
        }
      }).catch(res => {
        return Toast('系统异常')
      })
    }, 1000)
  }
}
</script>
<style scoped lang='scss'>
.confirm {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 15px;
  padding-bottom: 200px;
  background-color: #F4F5F7;
  overflow-y: scroll;

  //地址
  .confirm-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 14px;
    font-size: 28px;

    &.address {
      margin-top: 30px;
      box-sizing: border-box;
      padding: 20px;

      .left {
        display: flex;
        justify-content: start;
        align-items: center;

        .address-img {
          width: 67px;
          height: 67px;
        }

        .choose-text {
          margin-left: 30px;
        }

        .address-details {
          margin-left: 30px;
          margin-right: 20px;
          display: flex;
          justify-content: center;
          align-items: start;
          flex-direction: column;
          font-size: 26px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: #34343e;
          text-align: left;
          word-break: break-all;

          .place {
            margin-top: 10px;
          }
        }
      }

      .edit-img {
        width: 32px;
        height: 32px;
      }
    }

    &.goods-desc {
      min-height: 248px;
      padding: 30px;
      justify-content: start;
      overflow: hidden;

      .goods-img {
        display: block;
        width: 183px;
        height: 183px;
      }

      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: start;
        width: calc(100% - 210px);
        height: 100%;
        margin-left: 30px;
        font-size: 28px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;

        .name {
          color: #000000;
          font-weight: 600;
          text-align: left;
        }

        .total-price {
          align-self: flex-end;
          color: #D93939;

        }

        .number {
          color: #7c7c7c;
        }
      }

    }

    &.price, &.coupon {
      height: 116px;
      padding: 0 34px;

      .left {
        font-weight: 600;

        &.goods-coupon {
          color: #8E8E8E;
        }
      }

      .right {
        display: flex;
        justify-content: end;
        align-items: center;

        .go-home {
          width: 135px;
          height: 45px;
          background: linear-gradient(180deg, #d1203c, #b0071e 99%);
          border-radius: 10px;
          font-size: 22px;
          font-family: PingFangHK, PingFangHK-Regular;
          font-weight: 400;
          text-align: center;
          color: #ffffff;
          line-height: 45px;
        }

        .coupon-price {
          display: flex;
          justify-content: end;
          align-items: center;
        }

        .price {
          font-size: 28px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 600;
          color: #d93939;
          margin-right: 50px;
        }
      }

    }

  }

  //价格
  .price-content {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20px;
    padding: 0 30px;
    padding-bottom: 30px;
    background: #ffffff;
    border-radius: 14px;
    font-size: 28px;
    overflow: hidden;

    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      margin-top: 40px;

      .right {
        display: flex;
        justify-content: end;
        align-items: center;

        .go-home {
          width: 135px;
          height: 45px;
          background: linear-gradient(180deg, #d1203c, #b0071e 99%);
          border-radius: 10px;
          font-size: 22px;
          font-family: PingFangHK, PingFangHK-Regular;
          font-weight: 400;
          text-align: center;
          color: #ffffff;
          line-height: 45px;
        }

        .price {
          font-size: 28px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 600;
          color: #d93939;
        }
      }

    }

  }

  //手机号码
  .phone {
    margin-top: 30px;
    margin-bottom: 20px;
    border-radius: 14px;
  }

  /deep/ .van-field__body .van-field__clear {
    color: rgba(171, 171, 171, 1);
  }

  .submit {
    position: fixed;
    left: 50%;
    bottom: 70px;
    transform: translate(-50%, 0);
    width: 690px;
    height: 90px;
    font-size: 36px;
    font-weight: 500;
    text-align: center;
    color: #ffffff;
    line-height: 90px;
    background: linear-gradient(84deg, #d1203c 1%, #b0071e 69%);
    border-radius: 45px;
  }

  /*提交按钮*/
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 145px;

    .submit-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 690px;
      height: 90px;
      margin: 0 auto;
      border-radius: 45px;
      overflow: hidden;

      .pay-amount {
        width: 690px;
        height: 90px;
        background: linear-gradient(84deg, #d1203c 4%, #b0071e 69%);
        width: 480px;
        font-size: 36px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 500;
        text-align: center;
        color: #ffffff;
        line-height: 90px;
      }

    }

  }
}
</style>
